<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div id="sports-information1">
	<div id="sports-addArea">
		<h2></h2>
		<div></div>
	</div>
	<div id="cart">
		<dl>
			<dt class="sports-list-caption">종류</dt>
			<dd id="first">
				<ul>
					<li class="food-list"><a
						href="javascript:myfoodchoice(null,'한식',null);"><span>한식</span></a></li>
					<li class="food-list"><a
						href="javascript:myfoodchoice(null,'중식',null);"><span>중식</span></a></li>
					<li class="food-list"><a
						href="javascript:myfoodchoice(null,'양식',null);"><span>양식</span></a></li>
					<li class="food-list"><a
						href="javascript:myfoodchoice(null,'간식',null);"><span>간식</span></a></li>
				</ul>
			</dd>
		</dl>
		<dl id="foodS-chedule-Choice">
			<dt class="sports-list-caption">식품</dt>
			<dd id="two">
				<ul>
					<c:forEach var="Classfication" items="${foodClassficationList }">
						<li class="sports-list"><a
							href="javascript:myfoodchoice(null,${foodchoice.foodClass }, ${Classfication.foodClassfication });"><span>${Classfication.foodClassfication
									}</span></a></li>
					</c:forEach>
				</ul>
			</dd>
		</dl>
		<dl>
			<dt class="sports-list-caption">성분</dt>
			<dd id="three">
				<ul>
					<li class="slider-li">
						<p class="title-slider" title='1'>칼로리</p>
						<div class="slider"></div>
						<p class="num">0~3000</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='2'>탄수화물</p>
						<div class="slider"></div>
						<p class="num">0~350</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='3'>단백질</p>
						<div class="slider"></div>
						<p class="num">0~110</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='4'>지방</p>
						<div class="slider"></div>
						<p class="num">0~190</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='5'>나트륨</p>
						<div class="slider"></div>
						<p class="num">0~40,000</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='6'>식이섬유</p>
						<div class="slider"></div>
						<p class="num">0~100</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='7'>콜레스테롤</p>
						<div class="slider"></div>
						<p class="num">0~1,500</p>
					</li>
					<li style="width: 100%; height: 67px;"><input type="text"
						id="slider-result"
						style="border: 0; color: #f6931f; font-weight: bold;" /></li>
				</ul>
			</dd>
		</dl>
	</div>
	<div id="sports-div" class="sports-div food"
		style="height: 37%; overflow: auto;">
		<c:forEach var="food" items="${foodlist }">
			<div style="width: 100%; height: 95px;">
				<div id="sports-div-text" style="width: 440px;">
					<table>
						<tr>
							<td rowspan="6" style="width: 70px;">이미지</td>
							<td>
						<tr>
							<td colspan="4" style="width: 300px;">${food.foodName }</td>
							<td rowspan="6" style="width: 70px;"><input type="button"
								id="scheduleAdd" name="scheduleAdd" value="입력" onclick=""></td>
						</tr>
						<tr>
							<td style="width: 15%;">칼로리</td>
							<td style="width: 15%;">탄수화물</td>
							<td style="width: 15%;">단백질</td>
							<td style="width: 15%;">지방</td>
						</tr>
						<tr>
							<td style="width: 15%;">${food.foodCalorie }Kcal</td>
							<td style="width: 15%;">${food.foodCarbohydrate }g</td>
							<td style="width: 15%;">${food.foodProtein }g</td>
							<td style="width: 15%;">${food.foodFat }g</td>
						</tr>
						<tr>
							<td style="width: 15%;">나트륨</td>
							<td style="width: 15%;">식이섬유</td>
							<td style="width: 15%;">콜레스테롤</td>
							<td style="width: 15%;"></td>
						</tr>
						<tr>
							<td style="width: 15%;">${food.foodNatrium }g</td>
							<td style="width: 15%;">${food.foodCelluloseFiber }g</td>
							<td style="width: 15%;">${food.foodCholesterol }g</td>
							<td style="width: 15%;"></td>
						</tr>
						</td>
						</tr>
					</table>
				</div>
			</div>
		</c:forEach>
	</div>
</div>